<template>
  <div class="myorder-box">
    <van-nav-bar
      title="订单"
      left-text="返回"
      left-arrow
      @click-left="$goBack"
      placeholder
      fixed
    />

    <van-tabs v-model="active" color="#1baeae">
      <van-tab title="全部 "></van-tab>
      <div class="shop-cart-item" v-for="item in shopListAll" :key="item.goodsId" >
            <div v-if="active == 0">
              <img :src="item.goodsCoverImg" />
              <div class="right-box">
                <!-- 头部标题 -->
                <div class="top">
                  <!-- 标题文字 -->
                  <span style="font-weight: bold; margin-top: 18px;">{{ item.goodsName }}</span>
                </div>
                <div class="middll">
                  <!-- 介绍文字 -->
                   <span style="margin-top: 20px; font-size: 14px;">{{ item.goodsIntro }}</span>
                </div>
                <!-- 底部价格 -->
                <div class="bottom">
                  <!-- 价格信息 -->
                  <span style="font-size: 12px; font-weight: bold;">￥{{ item.sellingPrice }}</span>
                </div>
              </div>
            </div>
        </div>

        <!-- 购物车列表 -->

      <van-tab title="待付款">
      </van-tab>
          <div class="shop-cart-item" v-for="item in shopListFalse " :key="item.goodsId"  >
            <div v-if="active == 1">
              <img :src="item.goodsCoverImg" />
              <div class="right-box">
                <!-- 头部标题 -->
                <div class="top">
                  <!-- 标题文字 -->
                  <span style="font-weight: bold; margin-top: 20px;">{{ item.goodsName }}</span>
                </div>
                <div class="middll">
                  <!-- 介绍文字 -->
                   <span style="margin-top: 20px; font-size: 14px;">{{ item.goodsIntro }}</span>
                </div>
                <!-- 底部价格 -->
                <div class="bottom">
                  <!-- 价格信息 -->
                  <span style="font-size: 12px; font-weight: bold;">￥{{ item.sellingPrice }}</span>
                </div>
              </div>
            </div>
      </div>

      <van-tab title="交易完成">
      </van-tab>
          <div class="shop-cart-item" v-for="item in shopListTrue" :key="item.goodsId" >
            <div v-if="active == 2">
              <img :src="item.goodsCoverImg" />
              <div class="right-box">
                <!-- 头部标题 -->
                <div class="top">
                  <!-- 标题文字 -->
                  <span style="font-weight: bold; margin-top: 20px;">{{ item.goodsName }}</span>
                </div>
                <div class="middll">
                  <!-- 介绍文字 -->
                   <span style="margin-top: 20px; font-size: 14px;">{{ item.goodsIntro }}</span>
                </div>
                <!-- 底部价格 -->
                <div class="bottom">
                  <!-- 价格信息 -->
                  <span style="font-size: 12px; font-weight: bold;">￥{{ item.sellingPrice }}</span>
                </div>
              </div>
            </div>
          </div>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      shopListAll:localStorage.getItem("shopListAll")? JSON.parse(localStorage.getItem("shopListAll")):[],
      shopListTrue:localStorage.getItem("shopListTrue")? JSON.parse(localStorage.getItem("shopListTrue")):[],
      shopListFalse:localStorage.getItem("shopListFalse")? JSON.parse(localStorage.getItem("shopListFalse")):[],

    };
  },
};
</script>

<style lang="less">
.shop-cart-item {
      align-items: center;
      overflow: hidden;
      img {
        height: 50px;
        width: 50px;
        margin: 0 16px;
        float: left;
        margin-top: 20px;
      }

      .right-box {
        flex: 1;
        overflow: hidden;
        
        .top {
          display: flex;
          align-items: center;
          
          & span:nth-child(1) {
            flex: 1;
            margin-right: 10px;
            // 溢出隐藏 多余部分...表示
            overflow: hidden;
            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

        }
        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;

          span {
            color: red;
          }
        }
      }
    }
</style>